<template>

  <section class="index-slide">
    <div class="slide">
      <dl v-for="(item,index) in arr" :key="index">
        <router-link to="/Classification">
          <dt><img :src="item.image" alt=""></dt>
          <dd>{{ item.title }}</dd>
        </router-link>
      </dl>
    </div>
  </section>

</template>

<script>
import {indexSlide  } from "../api/api";
  import axios from 'axios';
  export default  {
    name: 'index-slide',
    props: [],
    created() {
      this.getIndexSlide();
    },
    data() {
      return {
        arr:[],
      }
    },
    methods: {

      // 获取导航分类
      getIndexSlide(){
        const token = '1ec949a15fb709370f';
        indexSlide(token).then(res=>{
          this.arr = res.data.data;
        })
      }
    },
    computed: {

    }
}
</script>

<style scoped>
  .slide{
    text-align: center;
    height: 1.6rem;
    display: flex;
    flex-direction: row;
    background: #fff;
    margin-top: 0.11rem;
    margin-bottom: 0.19rem;
    color: #7b7f82;
  }
  .slide dl{
    flex: 1;
  }
  .slide dt{
    margin-top: 0.15rem;
  }
  .slide img{
    width: 0.82rem;
  }
  .slide dd{
    color: #7b7f82;
  }
</style>
